<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用promise加载图片</title>
</head>
<body>
    <script>
        //使用promise异步加载图片
        function loadImage(file){
            return new Promise((resolve,reject) => {
                const image = new Image();
                image.src = file;
                image.onload = () => {
                    resolve(image);
                };
                image.onerror = reject;
                document.body.appendChild(image);
            });
        }
        loadImage("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607406035239&di=4c1e386303d46f6e4450a74ed1bb3838&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F24%2F78%2F20300000291746133783784887147.jpg").then(image => {
            image.style.border = "20px solid red";
            console.log("宽度:" + window.getComputedStyle(image).width);
        });
    </script>
</body>
</html>